<template>
	<z-paging
		show-refresher-update-time
		show-refresher-when-reload
		bg-color="#f5f5f5"
		v-model="shifuList"
		class="app app-bg"
		ref="paging"
		:auto="false"
		@query="queryList"
	>
		<view class="nav" slot="top">
			<u-search
				placeholder="请输入技师姓名搜索"
				search-icon-color="#3ab54a"
				v-model="name"
				bg-color="#fff"
				height="70"
				:show-action="false"
				@clear="search"
				@search="search"
			></u-search>
		</view>
		<block v-for="item in shifuList" :key="item._id">
			<shifu-item :info="item" :sid="sid"></shifu-item>
		</block>
	</z-paging>
</template>

<script>
var vk = uni.vk // vk依赖
import shifuItem from "@/pages/index/components/shifu-item.vue"

export default {
	components: { shifuItem },
	data() {
		return {
			sid: "",
			name: "",
			lonlat: null,
			style: { fontSize: "26rpx", marginRight: "28rpx" },
			shifuList: []
		}
	},
	onLoad(options = {}) {
		if (options.id) {
			this.sid = options.id
		} else {
			vk.toast("参数不足", "none", 1000, () => {
				vk.navigateBack()
			})
		}
		this.$nextTick(() => {
			this.checkAddress()
		})
	},
	methods: {
		// 地址
		checkAddress() {
			let adr = vk.getStorageSync("adr")
			if (!adr) {
				vk.confirm("需要获取当前位置已用于计算距离，请开启权限", res => {
					if (res.confirm) {
						this.startLocat()
					} else {
						vk.alert("未开启权限，将无法使用部分功能~")
						this.$refs.paging.reload()
					}
				})
			} else {
				this.lonlat = adr
				this.$refs.paging.reload()
			}
		},
		// 定位
		startLocat() {
			let type = "gcj02"
			let geocode = true
			//#ifdef H5
			vk.showLoading("获取中...")
			type = "wgs84"
			geocode = false
			//#endif
			uni.getLocation({
				type,
				geocode,
				success: async res => {
					vk.hideLoading()
					if (!res.address) {
						return vk.alert("定位失败，请稍后重试~")
					}
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.lonlat = [res.longitude, res.latitude]
					this.$refs.paging.reload()
				},
				fail: () => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
		},
		// 查询商师傅列表
		queryList(pageIndex, pageSize) {
			const { name, location } = this
			vk.callFunction({
				url: "client/pub.queryShifu",
				data: {
					pageIndex,
					pageSize,
					name,
					sid: this.sid,
					lonlat: this.lonlat
				}
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 搜索
		search() {
			this.$refs.paging.reload()
		},
		// 立即预约
		select(item) {
			vk.redirectTo(`/pages/project/order-create?sid=${this.sid}&pid=${item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav {
	background-color: #fff;
	border-radius: 44rpx;
	margin: 24rpx 20rpx 12rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 20rpx;
	display: flex;
	align-items: center;
}

.info {
	padding-left: 22rpx;
	flex: 1;
	.title {
		font-size: 30rpx;
		font-weight: bold;
	}
	.time {
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #999999;
		padding: 14rpx 0 26rpx;
		.u-icon {
			margin: 2rpx 6rpx 0 0;
		}
		.btn {
			font-size: 28rpx;
			color: #ffffff;
			padding: 6rpx 20rpx;
			background-color: #3ab54a;
			border-radius: 28rpx;
		}
	}
	.money {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: flex-start;
		.now {
			color: #ff5555;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: -4rpx;
			&::before {
				content: "￥";
				font-size: 24rpx;
				font-weight: normal;
			}
		}
		.base {
			text-decoration: line-through;
			margin: 0 8rpx;
			flex: 1;
		}
	}
}
</style>
